import React from 'react';
import { Layout, Menu, Row, Tooltip, Tabs } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined, QuestionCircleOutlined, MailOutlined, AppstoreOutlined, SettingOutlined } from "@ant-design/icons"
import _ from 'lodash'
import './css/main.css';
import { YvMenu, Node } from './YvMenu'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const { TabPane } = Tabs;

const siderBarWidth = 260
const siderBarSmallWidth = 80

interface IProp {
    dataSource?: Node[]
    onClick?: Function
}

interface IPanel {
    title: string
    key: string
    content: any
}

interface IState {
    collapsed: boolean
    collapsedWidth: number
    marginLeft: number
    selectedTabKey: any
    panels: IPanel[]
}

export class Main extends React.Component<IProp, IState> {

    state: IState = {
        collapsed: false,
        collapsedWidth: siderBarSmallWidth,
        marginLeft: 260,
        selectedTabKey: undefined,
        panels: []
    }

    toggle() {
        console.log('toggle');
    }

    selectTab(key: string): boolean {
        const fi = _.findIndex(this.state.panels, (p) => p.key === key)
        if (fi >= 0) {
            // 已经打开过该标签
            this.setState({ selectedTabKey: key })
            return true
        }
        return false;
    }

    addTab(module: IPanel) {
        const selectedTabKey = module.key;
        if (this.selectTab(selectedTabKey)) {
            // 已经打开过该标签
            return
        }

        // 添加一个标签
        const { panels } = this.state;
        panels.push({ title: module.title, content: module.content, key: selectedTabKey });
        this.setState({ panels, selectedTabKey });
    }

    render() {
        return (
            <Layout>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}
                    breakpoint="lg" collapsedWidth={this.state.collapsedWidth} onBreakpoint={(broken) => {
                        if (broken) {
                            // 移动端
                            this.setState({
                                collapsed: true,
                                collapsedWidth: 0,
                                marginLeft: 0,
                            })
                        } else {
                            this.setState({
                                collapsed: false,
                                collapsedWidth: siderBarSmallWidth,
                                marginLeft: 260,
                            })
                        }
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log("onCollapse：", collapsed, type)
                    }}
                    width={siderBarWidth}
                    style={{
                        overflow: "auto",
                        height: "100vh",
                        position: "fixed",
                        zIndex: 11,
                        left: 0,
                    }}
                >
                    <div className="logo" />
                    <YvMenu dataSource={this.props.dataSource} onClick={this.props.onClick} />
                </Sider>
                <Layout className="site-layout">
                    <Header
                        className="site-layout-background"
                        style={{
                            position: "fixed",
                            zIndex: 10,
                            width: "100%",
                            padding: 0,
                            marginLeft: this.state.marginLeft,
                        }}
                    >
                        <Row>
                            {React.createElement(
                                this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                                {
                                    className: "trigger",
                                    onClick: this.toggle,
                                }
                            )}

                            <Tooltip title="使用文档">
                                <a
                                    target="_blank"
                                    href="https://pro.ant.design/docs/getting-started"
                                    rel="noopener noreferrer"
                                >
                                    <QuestionCircleOutlined />
                                </a>
                            </Tooltip>
                        </Row>
                    </Header>
                    <Tabs
                        style={{
                            marginTop: 64,
                            marginLeft: this.state.marginLeft,
                        }}
                        type="card" size='large'
                        activeKey={this.state.selectedTabKey}>
                        {/* <TabPane tab="Card Tab 1" key="1">Content of card tab 1</TabPane>
                        <TabPane tab="Card Tab 2" key="2">Content of card tab 2</TabPane>
                        <TabPane tab="Card Tab 3" key="3">Content of card tab 3</TabPane> */}
                        {
                            _.map(this.state.panels, pane => (
                                <TabPane tab={pane.title} key={pane.key}>
                                    {pane.content}
                                </TabPane>
                            ))
                        }
                    </Tabs>
                    {/* <div
                        style={{
                            position: "fixed",
                            zIndex: 10,
                            width: "100%",
                            padding: "0 10px",
                            marginLeft: this.state.marginLeft,
                            backgroundColor: "white",
                            marginTop: 64,
                            overflowX: "auto",
                            overflowY: "hidden",
                            whiteSpace: "nowrap",
                        }}
                    >
                        <TabPaneCustom tabIndex={0} tabName="销售开票单" />
                        <TabPaneCustom tabIndex={1} tabName="预到货通知单" />
                        <TabPaneCustom tabIndex={2} tabName="销售计划单" />
                        <TabPaneCustom tabIndex={3} tabName="销售出库单" />
                    </div> */}
                </Layout>
            </Layout>
        );
    }
}
